<template>
	<view>
		<view class="bg">
			<view class="fanhui">
					<image src="../../../../static/teacherimg/fan.png" mode="" class="hui" @click="fanhui"></image>
					<text class="myxueyuanzi">打卡</text>
			</view>
		</view>
		
		<view class="course-content" >
		      <view class="course-class">
		        <view class="course-bg">课程</view>
		        <view class="gangqin">钢琴初级班</view>
		      </view>
		
		      <view class="timedian">
		        <view class="red"></view>
		        <view class="day">5月27日</view>
		        <view class="zhouji">周六</view>
		        <view class="course-time">8:00-12:00</view>
		      </view>
		
		      <view class="jiaoshi">
		        <view class="red"></view>
		        <view class="course-jiaoshi">A教室</view>
		        <view class="shu">丨</view>
		        <view class="laoshi">小p老师</view>
		      </view>
		    </view>
		
		    <view class="shouke">
		      <view class="keshi">
		        <view class="course-keshi">本次授课课时</view>
		        <view class="jieshu">1</view>
		      </view>
		      <view class="banji" @click="banji">
		        <view class="xuan-class">请选择学生：</view>
		        <view class="wo-tiao">
		          <img src="../../../../static/teacherimg/fasong.png" alt="" />
		        </view>
		      </view>
		    </view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.bg{
		width: 100%;
		height: 116rpx;
		position: relative;
		background: url(../../../../static/teacherimg/tabbar.png) no-repeat;
		background-size: cover;
	}
	.fanhui{
		width: 690rpx;
		height: 35rpx;
		position: absolute;
		display: flex;
		bottom: 0rpx;
		left: 30rpx;
	}
	.myxueyuanzi{
		width:auto;
		height: 100%;
		font-size:32rpx;
		color: #333333;
		font-weight: bold;
		margin: auto;
	}
	.hui{
		width: 18rpx;
		height: 32rpx;
	}
	
	
	.course-content {
	  width: 92vw;
	  height: 30vw;
	  margin: auto;
	  margin-top: 18.4vw;
	  background: #fff;
	  border-radius: 2.6667vw;
	  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.16);
	  overflow: hidden;
	}
	
	.course-class {
	  width: 100%;
	  height: 4.2667vw;
	  box-sizing: border-box;
	  padding-left: 2.2667vw;
	  margin-top: 5.3333vw;
	}
	.course-bg {
	  width: 7.7333vw;
	  height: 4vw;
	  float: left;
	  color: #ffffff;
	  text-align: center;
	  line-height: 4vw;
	  font-size: 3.2vw;
	  font-weight: bold;
	  font-family: PingFang;
	  border-radius: 0.8vw;
	  background:#8DCE2A;
	}
	
	.gangqin {
	  width: auto;
	  height: 100%;
	  line-height: 4.2667vw;
	  float: left;
	  margin-left: 2vw;
	  color: #333333;
	  font-size: 4.2667vw;
	  font-weight: bold;
	}
	
	.timedian {
	  width: 100%;
	  height: 4vw;
	  margin-top: 4.6667vw;
	  box-sizing: border-box;
	  padding-left: 2.6667vw;
	}
	.red {
	  width: 0.8vw;
	  height: 0.8vw;
	  border-radius: 50%;
	  float: left;
	  margin-top: 1.6vw;
	  background:#8DCE2A;
	}
	.day,
	.zhouji,
	.course-time {
	  width: auto;
	  height: 100%;
	  float: left;
	  margin-left: 1.3333vw;
	  color: #333333;
	  font-size: 3.4667vw;
	  line-height: 4vw;
	  font-weight: bold;
	}
	.zhouji,
	.course-time {
	  margin-left: 2.6667vw;
	}
	
	.jiaoshi {
	  width: 100%;
	  height: 4vw;
	  box-sizing: border-box;
	  padding-left: 2.6667vw;
	  margin-top: 4vw;
	}
	.course-jiaoshi,
	.laoshi,
	.shu {
	  width: auto;
	  height: 100%;
	  float: left;
	  margin-left: 1.3333vw;
	  font-size: 3.4667vw;
	  font-weight: bold;
	  font-weight: bold;
	  color: #333333;
	  line-height: 4vw;
	}
	
	.shouke {
	  width: 92vw;
	  height: 25.8667vw;
	  margin: auto;
	  margin-top: 4vw;
	  background: #fff;
	  border-radius: 2.6667vw;
	  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.16);
	}
	
	.keshi {
	  width: 84.2667vw;
	  height: 11.6vw;
	  border-bottom: 0.1333vw solid #f5f5f5;
	  margin: auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.course-keshi,
	.jieshu {
	  width: auto;
	  height: 100%;
	  color: #333333;
	  font-size: 3.7333vw;
	  font-family: PingFang SC;
	  line-height: 13.3333vw;
	  font-weight: 500;
	}
	
	.banji {
	  width: 84.2667vw;
	  height: 13.3333vw;
	  margin: auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.xuan-class {
	  width: auto;
	  height: 100%;
	  line-height: 13.3333vw;
	  font-size: 3.7333vw;
	  font-weight: 500;
	  font-family: PingFang SC;
	}
	.wo-tiao > img {
	  width: 1.4667vw;
	  height: 2.6667vw;
	}
</style>
